<template>
  <div class="rules-container">
    <div class="dashboard-text">
      <div class="lef">
        <i />
        更多规则设置
      </div>
    </div>
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      label-width="136px"
      class="demo-ruleForm"
    >
      <div class="rules-bd">
        <div class="title">聚合金币值规则设置</div>
        <div class="rules-form clearfix">
          <div class="form1">
            <div class="line">
              <div class="p1 fl pr">
                <p>
                  <el-form-item label="每连续签到：" prop="r.polymerizationReward">
                    <el-input v-model="ruleForm.r.polymerizationReward" />
                  </el-form-item>
                  <span>天</span>
                </p>
              </div>
              <div class="p1 fl">
                <p>
                  <el-form-item label="额外奖励：" prop="cr.polymerizationReward">
                    <el-input v-model="ruleForm.cr.polymerizationReward" />
                  </el-form-item>
                  <span>点</span>
                </p>
              </div>
            </div>
            <div class="line">
              <div class="p1 fl">
                <p>
                  <el-form-item label="购买金币消费：" prop="t.polymerizationReward">
                    <el-input v-model="ruleForm.t.polymerizationReward" placeholder="1" />
                  </el-form-item>
                  <span>元</span>
                </p>
              </div>
              <div class="p1 fl">
                <p style="line-height: 40px;margin-left:70px;color:#606266;">奖励1点聚合金币值</p>
              </div>
            </div>
            <div class="line">
              <div class="p1 fl">
                <p>
                  <el-form-item label="购买金币消费：" prop="t10.polymerizationReward">
                    <el-input v-model="ruleForm.t10.polymerizationReward" placeholder="10" />
                  </el-form-item>
                  <span>元</span>
                </p>
              </div>
              <div class="p1 fl">
                <p style="line-height: 40px;margin-left:70px;color:#606266;">奖励5点聚合金币值</p>
              </div>
            </div>
            <!--  -->
            <div class="line">
              <div class="p1 fl">
                <p>
                  <el-form-item label="购买金币消费：" prop="t20.polymerizationReward">
                    <el-input v-model="ruleForm.t20.polymerizationReward" placeholder="20" />
                  </el-form-item>
                  <span>元</span>
                </p>
              </div>
              <div class="p1 fl">
                <p style="line-height: 40px;margin-left:70px;color:#606266;">奖励10点聚合金币值</p>
              </div>
            </div>
            <!-- <div class="line">
              <div class="p1 fl">
                <p>
                  <el-form-item label="单次最高可获得" prop="mp.polymerizationReward">
                    <el-input v-model="ruleForm.mp.polymerizationReward" placeholder="1000" />
                  </el-form-item>
                  <span>点</span>
                </p>
              </div>
              <div class="p1 fl">
                <p style="line-height: 40px;margin-left:30px;color:#606266;">聚合金币值</p>
              </div>
            </div> -->
          </div>
          <!-- 金币设置 -->
          <div class="title">金币规则设置</div>
          <div class="form1">
            <div class="line">
              <div class="p1 fl pr">
                <p>
                  <el-form-item label="每连续签到：" prop="r.goldReward">
                    <el-input v-model="ruleForm.r.goldReward" />
                  </el-form-item>
                  <span>天</span>
                </p>
              </div>
              <div class="p1 fl">
                <p>
                  <el-form-item label="额外奖励：" prop="cr.goldReward">
                    <el-input v-model="ruleForm.cr.goldReward" />
                  </el-form-item>
                  <span>枚</span>
                </p>
              </div>
            </div>
            <div class="line">
              <div class="p1 fl">
                <p>
                  <el-form-item label="购买金币消费：" prop="t.goldReward">
                    <el-input v-model="ruleForm.t.goldReward" placeholder="1" />
                  </el-form-item>
                  <span>元</span>
                </p>
                <!-- <span
                style="display: inline-block;height: 40px;line-height: 64px;margin-left: 15px;"
                >奖励1点聚合金币值</span>-->
              </div>
              <div class="p1 fl">
                <p style="line-height: 40px;margin-left:70px;color:#606266;">奖励1枚金币</p>
              </div>
            </div>
            <div class="line">
              <div class="p1 fl">
                <p>
                  <el-form-item label="购买金币消费：" prop="t10.goldReward">
                    <el-input v-model="ruleForm.t10.goldReward" placeholder="10" />
                  </el-form-item>
                  <span>元</span>
                </p>
              </div>
              <div class="p1 fl">
                <p style="line-height: 40px;margin-left:70px;color:#606266;">奖励2枚金币</p>
              </div>
            </div>
            <!--  -->
            <div class="line">
              <div class="p1 fl">
                <p>
                  <el-form-item label="购买金币消费：" prop="t20.goldReward">
                    <el-input v-model="ruleForm.t20.goldReward" placeholder="20" />
                  </el-form-item>
                  <span>元</span>
                </p>
              </div>
              <div class="p1 fl">
                <p style="line-height: 40px;margin-left:70px;color:#606266;">奖励3枚金币</p>
              </div>
            </div>
            <!-- <div class="line">
              <div class="p1 fl">
                <p>
                  <el-form-item label="单次最高可获得" prop="mg.goldReward">
                    <el-input v-model="ruleForm.mg.goldReward" placeholder="1000" />
                  </el-form-item>
                  <span>枚</span>
                </p>
              </div>
              <div class="p1 fl">
                <p style="line-height: 40px;margin-left:30px;color:#606266;">金币</p>
              </div>
            </div> -->
          </div>
        </div>
      </div>
    </el-form>
    <div class="submit">
      <el-button type="primary" @click="submit('ruleForm')">提交</el-button>
    </div>
  </div>
</template>
<script>
import { coinReward, updateReward } from "@/api/usermanage.js";
export default {
  data() {
    var checkNum = (rule, value, callback) => {
      var bool = new RegExp("^[1-9][0-9]*$").test(value);
      if (!bool || value == "") {
        return callback(new Error("请输入大于0的整数"));
      } else {
        callback();
      }
    };
    return {
      total: "",
      pageSize: 16,
      list: [],
      ruleForm: {
        // 每连续签到：
        r: {
          goldReward: "",
          polymerizationReward: ""
        },
        // 额外奖励：
        cr: {
          goldReward: "",
          polymerizationReward: ""
        },
        // 购买金币消费：
        t: {
          goldReward: "",
          polymerizationReward: ""
        },
        // 购买金币消费：
        t10: {
          goldReward: "",
          polymerizationReward: ""
        },
        // 购买金币消费：
        t20: {
          goldReward: "",
          polymerizationReward: ""
        },
        // // 单次最高可获得
        // mp: {
        //   goldReward: "",
        //   polymerizationReward: ""
        // },
        // // 单次最高可获得
        // mg: {
        //   goldReward: "",
        //   polymerizationReward: ""
        // }
      },
      rules: {
        // "r.goldReward": [
        //   { require:true,validate:checkNum, message: "请输入数字", trigger: "blur" }
        // ],
        // "r.polymerizationReward": [
        //   { validate:checkNum, message: "请输入数字", trigger: "blur" }
        // ],
        // "cr.goldReward": [
        //   { validate: checkNum, message: "请输入", trigger: "blur" }
        // ],
        // "cr.polymerizationReward": [
        //   { validate: checkNum, message: "请输入", trigger: "blur" }
        // ],
        // "t.goldReward": [
        //   { validate: checkNum, message: "请输入", trigger: "blur" }
        // ],
        // "t.polymerizationReward": [
        //   { validate: checkNum, message: "请输入", trigger: "blur" }
        // ],
        // "t10.goldReward": [
        //   { validate: checkNum, message: "请输入", trigger: "blur" }
        // ],
        // "t10.polymerizationReward": [
        //   { validate: checkNum, message: "请输入", trigger: "blur" }
        // ],
        // "t20.goldReward": [
        //   { validate: checkNum, message: "请输入", trigger: "blur" }
        // ],
        // "t20.polymerizationReward": [
        //   { validate: checkNum, message: "请输入", trigger: "blur" }
        // ],
        // "mp.goldReward": [
        //   { validate: checkNum, message: "请输入", trigger: "blur" }
        // ],
        // "mp.polymerizationReward": [
        //   { validate: checkNum, message: "请输入", trigger: "blur" }
        // ],
        // "mg.goldReward": [
        //   { validate: checkNum, message: "请输入", trigger: "blur" }
        // ],
        // "mg.polymerizationReward": [
        //   { validate: checkNum, message: "请输入", trigger: "blur" }
        // ]
      }
    };
  },
  created() {
    this.getrewardList();
  },
  methods: {
    getrewardList() {
      coinReward({
        pageNum: 1,
        pageSize: this.pageSize
      }).then(res => {
        console.log(res);
        this.pageSize = res.data.total;
        if (res.data.list && res.data.list.length) {
          let data = res.data.list;
          this.list = data;
          for (let index = 0; index < data.length; index++) {
            const element = data[index];
            if (this.ruleForm[element.rewardType]) {
              this.ruleForm[element.rewardType].goldReward = element.goldReward;
              this.ruleForm[element.rewardType].polymerizationReward =
                element.polymerizationReward;
            }
          }
        }
      });
    },
    submit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          for (let i in this.ruleForm) {
            for (let j = 0; j < this.list.length; j++) {
              if (i == this.list[j].rewardType) {
                if (this.ruleForm[i].goldReward) {
                  this.list[j].goldReward = this.ruleForm[i].goldReward;
                }
                if (this.ruleForm[i].polymerizationReward) {
                  this.list[j].polymerizationReward = this.ruleForm[
                    i
                  ].polymerizationReward;
                }
              }
            }
          }
          updateReward(this.list).then(res => {
            if(res.data){
             this.getrewardList();
            }
            // alert(this.list.message);
          });
          this.$alert("提交成功");
        } else {
          console.log("e提交失败");
          return false;
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.rules-container {
  width: 100%;
  padding: 0 110px 120px 26px;
  margin: 16px 0;
  .dashboard-text {
    margin-top: 17px;
    height: 37px;
    .lef {
      line-height: 37px;
      font-size: 16px;
      font-weight: 900;
      color: #333;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      i {
        display: inline-block;
        width: 11px;
        height: 20px;
        background: #488dff;
        border-radius: 4px;
        margin-right: 12px;
      }
    }
  }
  .rules-bd {
    min-height: 1043px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 10px 0px rgba(4, 0, 0, 0.1);
    border-radius: 4px;
    padding: 23px 0 40px 30px;
    .title {
      width: 180px;
      height: 40px;
      background: rgba(72, 141, 255, 1);
      color: #fff;
      line-height: 40px;
      text-align: center;
      position: relative;
      &::after {
        position: absolute;
        content: "";
        // background: red;
        right: -39px;
        top: -1px;
        border: 20px solid transparent;
        /* border-top-color: #369; */
        /* border-bottom-color: red; */
        border-left-color: rgba(72, 141, 255, 1);
        border-radius: 0;
        font-size: 0;
        width: 13px;
        height: 40px;
        padding: 0;
      }
    }
    .rules-form {
      .form1 {
        padding: 60px 0 60px 95px;
        .pr {
          margin-right: 20px;
        }
        .p1 {
          display: flex;
        }
        p {
          position: relative;
          span {
            position: absolute;
            display: inline-block;
            width: 40px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            background: rgba(153, 153, 153, 1);
            border-radius: 0px 2px 2px 0px;
            color: #fff;
            right: 0;
            top: 0;
          }
        }
      }
    }
  }
  .submit {
    width: 100px;
    height: 40px;
    margin: 30px auto;
  }
}
</style>
